<template>
	<view class="upload">
		<up-upload :fileList="fileList1" @after-read="afterRead" @delete="deletePic" :max-count="1"
			style="cursor: pointer;">
			<image style="border-radius: 50%; width: 5rem; height: 5rem; object-fit: cover;"
				:src="user?.avatarUrl || defaultAvatar" />
		</up-upload>
	</view>
	<up-cell-group>
		<up-cell title="个人设置" :value="user?.username"></up-cell>
		<up-cell :isLink="true" title="修改个人信息" url="/pages/profile/update"></up-cell>
		<up-cell :isLink="true" title="修改个人标签" url="/pages/profile/tags"></up-cell>
		<up-cell :isLink="true" title="创建的队伍" url="/pages/profile/create"></up-cell>
		<up-cell :isLink="true" title="加入的队伍" url="/pages/profile/join"></up-cell>
	</up-cell-group>
	<view class="button">
		<up-button text="注销" type="error" @click="logout" size="small"></up-button>
	</view>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import myAxios from '@/plugins/myAxios';

// 定义响应式变量
const user = ref(null);
const defaultAvatar = '/static/default-avatar.jpg'; // 默认头像路径
const fileList1 = ref([]);

// 生命周期钩子：组件挂载时加载用户信息
onMounted(async () => {
  try {
    const res = await myAxios.get('/user/current');
    if (res?.code === 0) {
      user.value = res.data; // 设置用户信息
    } else {
      uni.showToast({
        title: '加载用户信息失败',
        icon: 'error',
      });
    }
  } catch (error) {
    uni.showToast({
      title: '加载用户信息失败',
      icon: 'error',
    });
  }
});

// 文件大小超出限制的处理
const onOversize = () => {
  uni.showToast({
    title: '头像上传大小不能超过500kb',
    icon: 'error',
  });
};

// 处理头像文件上传逻辑
const afterRead = async (event) => {
  fileList1.value = [
    {
      ...event.file,
      status: 'uploading',
      message: '上传中',
    },
  ];

  try {
    const formData = new FormData();
    formData.append('avatarImg', event.file.file); // 将文件添加到表单数据中

    const res = await myAxios.post('/user/upload/avatar', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });

    if (res?.code === 0) {
      user.value.avatarUrl = res.data; // 更新用户头像
      fileList1.value[0].status = 'success';
      fileList1.value[0].message = '';
      fileList1.value[0].url = res.data;

      uni.showToast({
        title: '更新头像成功',
        icon: 'success',
      });
    } else {
      fileList1.value[0].status = 'error';
      uni.showToast({
        title: `更新头像失败${res.description ? `, ${res.description}` : ''}`,
        icon: 'error',
      });
    }
  } catch (error) {
    fileList1.value[0].status = 'error';
    uni.showToast({
      title: '更新头像失败，请重试',
      icon: 'error',
    });
  }
};

// 删除头像操作
const deletePic = () => {
  fileList1.value = []; // 清空文件列表
};

// 用户注销逻辑
const logout = async () => {
  try {
    const res = await myAxios.post('/user/logout');
    if (res?.code === 0) {
      user.value = null; // 清空用户信息
      uni.showToast({
        title: '已注销',
        icon: 'success',
      });
    } else {
      uni.showToast({
        title: '注销失败，请重试',
        icon: 'error',
      });
    }
  } catch (error) {
    uni.showToast({
      title: '注销失败，请重试',
      icon: 'error',
    });
  }
};
</script>


<style scoped>
	.upload {
		margin: 15px auto;
		text-align: center;
		display: block;
		width: 5rem;
		/* 根据需要调整宽度 */
	}

	.button {
		width: 100rpx;
		margin: 15rpx auto;
	}
</style>